@mixin triangle($size:50px,$color:red,$direction:top){
	width:0px;
	height:0px;
	border-width: $size;
	display: inline-block;
	@if $direction == 'top'{
		border-color:$color transparent transparent transparent;
	}@else if $direction == 'right'{
		border-color:transparent $color transparent transparent;
	}@else if $direction == 'bottom'{
		border-color:transparent transparent $color transparent;
	}@else if $direction == 'left'{
		border-color:transparent transparent transparent $color;
	}
	border-style:solid;
}

$config: (colors:red,direction:top),(colors:blue,direction:right),(colors:yellow,direction:bottom),(colors:black,direction:left);

@for $i from 1 through 4 {
	.div#{$i}{
		@include triangle(50px * $i, map-get(nth($config,$i),'colors'), map-get(nth($config,$i),'direction'));
	}
}